<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航</title>
<link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<style type="text/css">
body {
	margin:30px;
	padding:30px;
}
</style>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js" ></script>
</head>

<body>
<div class="navbar navbar-default" role="navigation"> 　
  <div class="navbar-header"> 　 <a href="##" class="navbar-brand">慕课网</a> 　</div>
  <ul class="nav navbar-nav">
    <li class="active"><a href="##">网站首页</a></li>
    <li><a href="##">系列教程</a></li>
    <li><a href="##">名师介绍</a></li>
    <li><a href="##">成功案例</a></li>
    <li class="dropdown"> <a href="##" data-toggle="dropdown" class="dropdown-toggle">关于我们<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">公司简介</a></li>
        <li class="disabled"><a href="#">企业文化</a></li>
        <li><a href="#">组织结构</a></li>
        <li><a href="#">客服服务</a></li>
      </ul>
    </li>
  </ul>
</div>
<!--导航条状态及二级菜单-->
<div class="navbar navbar-default" role="navigation"> 　
  <div class="navbar-header"> 　 <a href="##" class="navbar-brand">慕课网</a> 　</div>
  <ul class="nav navbar-nav">
    <li class="active"><a href="##">网站首页</a></li>
    <li class="dropdown"> <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="##">CSS3</a></li>
        <li><a href="##">JavaScript</a></li>
        <li class="disabled"><a href="##">PHP</a></li>
      </ul>
    </li>
    <li><a href="##">名师介绍</a></li>
    <li><a href="##">成功案例</a></li>
    <li><a href="##">关于我们</a></li>
  </ul>
</div>
<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header"> 　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 --> 
    <a href="##" class="navbar-brand">慕课网</a> </div>
  <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
  <div class="collapse navbar-collapse navbar-responsive-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="##">网站首页</a></li>
      <li><a href="##">系列教程</a></li>
      <li><a href="##">名师介绍</a></li>
      <li><a href="##">成功案例</a></li>
      <li><a href="##">关于我们</a></li>
    </ul>
  </div>
</div>
<h4>警示框</h4>
<div class="alert alert-success alert-dismissable" role="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  恭喜您操作成功！</div>
<div class="alert alert-info alert-dismissable" role="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  请输入正确的密码</div>
<div class="alert alert-warning alert-dismissable" role="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  您已操作失败两次，还有最后一次机会</div>
<div class="alert alert-danger alert-dismissable" role="alert">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  对不起，您输入的密码有误</div>
<br/>
<br/>
<h4>进度条</h4>
<div class="progress progress-striped">
  <div class="progress-bar" style="width:40%;"></div>
</div>
<h4>媒体</h4>
<div class="media">
    <a class="pull-left" href="#">
		<img class="media-object" src="http://a.disquscdn.com/uploads/users/3740/2069/avatar92.jpg?1406972031" alt="...">
	</a>
	<div class="media-body">
		<h4 class="media-heading">我是大漠</h4>
		<div>我是W3cplus站长大漠，我在写Bootstrap框中的媒体对象测试用例</div>
		<div class="media">
			<a class="pull-left" href="#">
				<img class="media-object" src="http://tp2.sinaimg.cn/3306361973/50/22875318196/0" alt="...大漠">
			</a>
			<div class="media-body">
				<h4 class="media-heading">慕课网</h4>
				<div>大漠写的《玩转Bootstrap》系列教程即将会在慕课网上发布</div>
				<div class="media">
					<a class="pull-left" href="#">
						<img class="media-object" src="http://tp4.sinaimg.cn/1167075935/50/22838101204/1" alt="...">
					</a>
					<div class="media-body">
						<h4 class="media-heading">W3cplus</h4>
						<div>W3cplus站上还有很多教程....</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<br />
<ul class="list-group">
    <li class="list-group-item"><span class="badge">23</span>性能优化之PHP优化</li>
    <li class="list-group-item"><span class="badge">34</span>Canvas绘图详解</li>
    <li class="list-group-item"><span class="badge">5</span>玩转Bootstrap</li>
    <li class="list-group-item"><span class="badge">13</span>基于bootstrap的网页开发</li>
</ul>
<ul class="list-group">
    <a href="#" class="list-group-item"><span class="badge">23</span>性能优化之PHP优化</a>
    <a href="#" class="list-group-item"><span class="badge">34</span>Canvas绘图详解</a>
    <a href="#" class="list-group-item"><span class="badge">5</span>玩转Bootstrap</a>
    <a href="#" class="list-group-item"><span class="badge">13</span>基于bootstrap的网页开发</a>
</ul>
<br />
<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">Canvas绘图详解</h4>
        <p class="list-group-item-text">本课程为Canvas系列课程第二课。通过对《绚丽的倒计时效果的学习》，在大家对Canvas绘图有一定了解的基础上......</p>
    </a>
    <a href="#" class="list-group-item list-group-item-info">
        <h4 class="list-group-item-heading">玩转Bootstrap</h4>
        <p class="list-group-item-text">Bootstrap框架是一个非常受欢迎的前端开发框架，他能让后端程序员和不懂设计的前端人员制作出优美的Web页面或Web应用程序。</p>
    </a>
     <a href="#" class="list-group-item disabled">
        <h4 class="list-group-item-heading">基于bootstrap的网页开发</h4>
        <p class="list-group-item-text">Bootstrap是用于前端开发的工具包，提供了优雅的HTML和CSS规范，并基于jQuery开发了丰富的Web组件。课程介绍了Bootstrap框架的基本知识，并基于Bootstrap框架...</p>
    </a>
</div>
</body>
</html>
